<!--
 * @Author: lucky
 * @Date: 2021-06-29 08:46:42
 * @LastEditors: wfz
 * @LastEditTime: 2021-07-03 16:02:10
 * @Description: Home页
-->
<template>
  <div>
    <!-- 路由页 -->
    <router-view />
    <!-- 底部标签栏 -->
    <!-- <van-tabbar class="" route v-model="active">
      <van-tabbar-item replace to="/index" for="home" class="home iconfont icon-shouye"></van-tabbar-item>
      <van-tabbar-item replace to="/order" for="infomation" class="infomation iconfont icon-shangcheng"></van-tabbar-item>
      <van-tabbar-item replace to="/money" for="money" class="money iconfont icon-yinhangka"></van-tabbar-item>
      <van-tabbar-item replace to="/mine" for="user" class="user iconfont icon-wode"></van-tabbar-item>
    </van-tabbar> -->
    <div class="done">
      <div class="done2">
        <header class="wrapper">
          <nav>
            <input type="radio" name="tab" id="home" :checked="flag" />
            <input type="radio" name="tab" id="infomation" :checked="flag1" />
            <input type="radio" name="tab" id="money" :checked="flag2" />
            <input type="radio" name="tab" id="user" :checked="flag3" />
            <div class="tab"></div>
            <label
              for="home"
              class="home iconfont icon-shouye"
              replace
              @click="shouye"
            ></label>
            <label
              for="infomation"
              class="infomation iconfont icon-shangcheng"
              @click="xinxi"
            ></label>
            <label
              for="money"
              class="money iconfont icon-yinhangka"
              @click="dindan"
            ></label>
            <label
              for="user"
              class="user iconfont icon-wode"
              @click="wode"
            ></label>
          </nav>
        </header>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  data() {
    return {
      flag: false,
      flag1: false,
      flag2: false,
      flag3: false,
      active: 0,
    };
  },
  computed: {},
  methods: {
    shouye() {
      this.$router.push({
        path: "/index",
      }),
        (this.flag = true);
      this.flag1 = false;
      this.flag2 = false;
      this.flag3 = false;
    },
    xinxi() {
      this.$router.push({
        path: "/order",
      }),
        (this.flag1 = true);
      this.flag = false;
      this.flag2 = false;
      this.flag3 = false;
    },
    dindan() {
      this.$router.push({
        path: "/money",
      }),
        (this.flag2 = true);
      this.flag1 = false;
      this.flag = false;
      this.flag3 = false;
    },
    wode() {
      this.$router.push({
        path: "/mine",
      }),
        (this.flag3 = true);
      this.flag1 = false;
      this.flag2 = false;
      this.flag = false;
    },
  },
  created() {},
  mounted() {
    if (this.$route.path === "/index") {
      this.flag = true;
      this.flag1 = false;
      this.flag2 = false;
      this.flag3 = false;
    } else if (this.$route.path === "/order") {
      this.flag1 = true;
      this.flag = false;
      this.flag2 = false;
      this.flag3 = false;
    } else if (this.$route.path === "/money") {
      this.flag2 = true;
      this.flag1 = false;
      this.flag = false;
      this.flag3 = false;
    } else if (this.$route.path === "/mine") {
      this.flag3 = true;
      this.flag1 = false;
      this.flag2 = false;
      this.flag = false;
    }
    console.log(this.$route.path);
  },
};
</script>
<style scoped>
.done {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  bottom: 0;
  position: fixed;
  /* top:0px; */
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.done2 {
  font-size: 14px;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  height: 50px;
  width: 100%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.wrapper nav {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.wrapper nav label {
  position: relative;
  flex: 1;
  text-align: center;
  z-index: 2;
  color: #666;
  margin-top: 10px;
  font-size: 25px;
}

#home:checked ~ label.home,
#infomation:checked ~ label.infomation,
#money:checked ~ label.money,
#user:checked ~ label.user {
  color: #fff;
}

.wrapper nav .tab {
  position: absolute;
  height: 100%;
  width: 20%;
  top: 0;
  left: 0;
  background: linear-gradient(45deg, #1989fa 0%, #4f98db 100%);
  border-radius: 20px;
  transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#home:checked ~ .tab {
  left: 3%;
}
#infomation:checked ~ .tab {
  left: 28%;
}
#money:checked ~ .tab {
  left: 53%;
}
#user:checked ~ .tab {
  left: 77%;
}

.wrapper nav input {
  display: none;
}
</style>
